<template>
	<div class="index" style="background: rgb(248, 248, 248);" >
    <van-nav-bar title="查询名下电话卡数量" left-arrow  @click-left="onClickLeft" />
    <div style=" padding:0.3rem;">

      <div style="background: linear-gradient(180.00deg, rgb(243, 248, 255),rgb(255, 255, 255) 15.093%,rgb(255, 255, 255) 100%); border-radius: 0.3rem; padding: 0.4rem 0;">
        <div class="flexcc"><img src="../../../static/img/shouye11.png" style="width: 1.6rem;"></div>
        <div style="margin: 0rem 0 0.4rem; text-align: center; font-size: 0.3rem;">查询名下电话卡数量</div>
        <div class="flexcc">
          <div style="background: rgb(0, 90, 255); border-radius: 0.3rem; color: rgb(255, 255, 255); font-size: 0.24rem; width: 2.4rem; height: 0.6rem;" class="flexcc" @click="gos('https://getsimnum.caict.ac.cn/m/#/')">点击查询</div>
        </div>

      </div>

      <div style="background: linear-gradient(180.00deg, rgb(243, 248, 255),rgb(255, 255, 255) 15.093%,rgb(255, 255, 255) 100%); border-radius: 0.3rem; padding: 0.4rem 0;">
        <div style="color: rgb(0, 90, 255); text-align: center; margin-bottom: 0.4rem; font-size: 0.32rem;"><span class="af">运营商官方渠道查询订单</span></div>
        <div class="flex" style="justify-content: space-around;">
          <div style="width: 1.9rem; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 20px; padding: 0.3rem 0;" class="flexcc">
            <div>
              <div class="flexcc"><img src="../../../static/img/shuangliang3.png" style="width: 0.8rem;" ></div>
              <div style=" font-size: 0.24rem; margin: 0.15rem 0;" class="flexcc">中国电信</div>
              <div class="flexcc" style="background: rgb(0, 90, 255); border-radius: 0.44rem; color: rgb(255, 255, 255); font-size: 0.2rem; width: 1.2rem; height: 0.44rem;"  @click="gos('https://pms.189.cn/cljy-web/static/xshkzzfw/xshkzzfw_index.html?shopid=szs-ah&cmpid=szs-ah')">前往</div>
            </div>
          </div>
          <div style="width: 1.9rem; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 20px; padding: 0.3rem 0;" class="flexcc">
            <div>
              <div class="flexcc"><img src="../../../static/img/shuangliang2.png" style="width: 0.8rem;" ></div>
              <div style=" font-size: 0.24rem; margin: 0.15rem 0;" class="flexcc">中国联通</div>
              <div class="flexcc" style="background: rgb(0, 90, 255); border-radius: 0.44rem; color: rgb(255, 255, 255); font-size: 0.2rem; width: 1.2rem; height: 0.44rem;" @click="gos('https://m.10010.com/myorder/')">前往</div>
            </div>
          </div>
          <div style="width: 1.9rem; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 20px; padding: 0.3rem 0;" class="flexcc">
            <div>
              <div class="flexcc"><img src="../../../static/img/shuangliang1.png" style="width: 0.8rem;" ></div>
              <div style=" font-size: 0.24rem; margin: 0.15rem 0;" class="flexcc">中国移动</div>
              <div class="flexcc" style="background: rgb(0, 90, 255); border-radius: 0.44rem; color: rgb(255, 255, 255); font-size: 0.2rem; width: 1.2rem; height: 0.44rem;" @click="gos('https://dev.coc.10086.cn/coc/web/coc2020/cardqueryorder/')">前往</div>
            </div>
          </div>
        </div>
      </div>

      <div style="background: linear-gradient(180.00deg, rgb(243, 248, 255),rgb(255, 255, 255) 15.093%,rgb(255, 255, 255) 100%); border-radius: 0.3rem; padding: 0.4rem 0; margin-top: 0.3rem;">
        <div style="color: rgb(0, 90, 255); text-align: center; margin-bottom: 0.4rem; font-size: 0.32rem;"><span class="af">运营商官方渠道撤销订单</span></div>
        <div class="flex" style="justify-content: space-around;">
          <div style="width: 1.9rem; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 20px; padding: 0.3rem 0;" class="flexcc">
            <div>
              <div class="flexcc"><img src="../../../static/img/shuangliang3.png" style="width: 0.8rem;" ></div>
              <div style=" font-size: 0.24rem; margin: 0.15rem 0;" class="flexcc">中国电信</div>
              <div class="flexcc" style="background: rgb(0, 90, 255); border-radius: 0.44rem; color: rgb(255, 255, 255); font-size: 0.2rem; width: 1.2rem; height: 0.44rem;"  @click="gos('https://pms.189.cn/cljy-web/static/xshkzzfw/xshkzzfw_index.html?shopid=szs-ah&cmpid=szs-ah')">前往</div>
            </div>
          </div>
          <div style="width: 1.9rem; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 20px; padding: 0.3rem 0;" class="flexcc">
            <div>
              <div class="flexcc"><img src="../../../static/img/shuangliang2.png" style="width: 0.8rem;" ></div>
              <div style=" font-size: 0.24rem; margin: 0.15rem 0;" class="flexcc">中国联通</div>
              <div class="flexcc" style="background: rgb(0, 90, 255); border-radius: 0.44rem; color: rgb(255, 255, 255); font-size: 0.2rem; width: 1.2rem; height: 0.44rem;" @click="gos('https://m.10010.com/myorder/')">前往</div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div style="font-size: 0.24rem; font-weight: bold; margin-top: 0.6rem;"><span class="af">查询手机号绑定了多少软件</span></div>
        <div class="flexbc">
          <div style="width: 4.4rem; font-size: 0.22rem;color: rgb(120, 125, 133); line-height: 0.44rem;">
              1.微信关注公众号“工信微微报”
              在底部导航处点击出击底部的《政务服务》，
              选择《一证通查》 在页面点击《互联网账号》
              按照要求输入查询即可

          </div>
          <div><img src="../../../static/img/shuangliang4.png" style="width: 2.1rem;"></div>
        </div>
      </div>
    </div>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {

			}
		},
		created() {

		},
		mounted() {
      document.title = "订单查询"
		},
		methods: {
      gos:function(url){
        window.location.href = url
      },
      handleCommand:function(){

      },
      onClickLeft:function(){
        this.$router.back(-1)
      },
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
  }
</style>
